

<template>
  <div class="bf-commont-template">
    <!-- 异动记录 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>异动记录</span>
      </div>
      <div >
        <div>
          <bf-table
            :data="changelogs"
            :setting="setting"
            :hiddenPagination="true"
            ref="table"
          ></bf-table>
        </div>
        <div v-if="changelogs.length == 0" class="data-null">--暂无数据--</div>
        <!-- <div v-for="(item, index) in changelogs" :key="item.id" class="step padding-b border-t border-l border-r padding-t">
          <div><span class="padding-r label">异动类型:</span><span>{{item.turnoverType}}</span></div>
          <div><span class="padding-r label">异动原因:</span><span>{{item.turnoverCause}}</span></div>
          <div><span class="padding-r label">生效日期:</span><span>{{item.effectDate}}</span></div>
          <div><span class="padding-r label">状态:</span><span>{{item.status}}</span></div>
          <div><span class="padding-r label">备注:</span><span>{{item.remarks}}</span></div>
          <div class="only-two">
            <span class="padding-r label">原合同公司:<span>{{item.originalCompany}}</span></span>
            <span class="padding-r label">目标合同公司:<span>{{item.targetCompany}}</span></span>
          </div>
          <div class="only-two">
            <span class="padding-r label">原工作地点:<span>{{item.originalWorkAddr}}</span></span>
            <span class="padding-r label">目标工作地点:<span>{{item.targetWorkAddr}}</span></span>
          </div>
          <div class="only-two">
            <span class="padding-r label">原工作地点:<span>{{item.originalWorkAddr}}</span></span>
            <span class="padding-r label">目标工作地点:<span>{{item.targetWorkAddr}}</span></span>
          </div>
          <div class="only-two">
            <span class="padding-r label">原部门:<span>{{item.originalOrgId}}</span></span>
            <span class="padding-r label">目标部门:<span>{{item.targetOrgId}}</span></span>
          </div>
          <div class="only-two">
            <span class="padding-r label">原岗位:<span>{{item.originalPost}}</span></span>
            <span class="padding-r label">目标岗位:<span>{{item.targetPost}}</span></span>
          </div>
          <div class="only-two">
            <span class="padding-r label">原职级:<span>{{item.originalPostLeve}}</span></span>
            <span class="padding-r label">目标职级:<span>{{item.targetPostLevel}}</span></span>
          </div>

          <div class="only-two">
            <span class="padding-r label">原其他:<span>{{item.originalOtherReward}}</span></span>
            <span class="padding-r label">目标其他:<span>{{item.targetOtherReward}}</span></span>
          </div>
          <span class="step-index">{{index + 1}}</span>
        </div> -->
      </div>
    </el-card>
  </div>
</template>

<script>
// import request from '@/utils/request';
import { queryChangelogsApi } from '../api'
export default {
  props: ['employeeData'],
  data() {
    return {
      changelogs: [],
      setting:[
        {
          field: "originalOrgId",
          title: "原部门",
          type: "text"
        },
        {
          field: "targetOrgId",
          title: "目标部门",
          type: "text"
        },
        {
          field: "originalPost",
          title: "原岗位",
          type: 'selected',
          isParams: true,
          paramsId: 'POST'
        },
        {
          field: "targetPost",
          title: "目标岗位",
          type: 'selected',
          isParams: true,
          paramsId: 'POST'
        },
        {
          field: "originalPostLevel",
          title: "原职级",
          type: 'selected',
          isParams: true,
          paramsId: 'RANK'
        },

        {
          field: "targetPostLevel",
          title: "目标职级",
          type: 'selected',
          isParams: true,
          paramsId: 'RANK'
        },
        {
          field: "turnoverType",
          title: "异动类型",
          type: 'selected',
          options: [
            {
              name: '入职',
              value: '1'
            },
            {
              name: '转正',
              value: '2'
            },
            {
              name: '晋升',
              value: '3'
            },
            {
              name: '降级',
              value: '4'
            },
            {
              name: '调岗',
              value: '5'
            },
            {
              name: '年度调薪',
              value: '6'
            },
            {
              name: '重新入职',
              value: '7'
            }
          ]
        },
        {
          field: "turnoverCause",
          title: "异动原因",
          type: 'selected',
          options: [ // 1、工作安排2、个人申请
            {
              name: '工作安排',
              value: '1'
            },
            {
              name: '个人申请',
              value: '2'
            }
          ]
        },
        {
          field: "remarks",
          title: "备注",
          type: "text"
        },
        {
          field: "effectDate",
          title: "生效日期",
          type: "date"
        },
        {
          field: "insertUser",
          title: "新增操作员",
          type: "text"
        },
        {
          field: "insertTime",
          title: "新增日期",
          type: "date"
        },
        {
          field: "insertDate",
          title: "新增时间",
          type: "time"
        }
        ]
    };
  },
  mounted: function() {
    this.queryChangelogs()
  },
  methods: {
    queryChangelogs() {
      queryChangelogsApi(this.employeeData.employeeNo).then(response => {
        // console.log(response)
        this.changelogs = response.data
      })
    }
  }
};
</script>
<style scoped>
@import './form.css';
.step>div{
  margin-bottom: 10px;
}
.step>div:last-child{
  margin-bottom: 0;
}
.step>div:first-child{
  font-weight: 700;
  color: #303133;
  color:#0099ff;
}
.step{
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  border-left: 1px solid #0099ff;
}
.step-index{
  position: absolute;
  left: -16px;
  top: -16px;
  height: 32px;
  width: 32px;
  border: 1px solid #0099ff;
  border-radius: 20px;
  text-align: center;
  line-height: 32px;
  background: #fff;
}
.only-two>span:first-child{
  display: inline-block;
  width: 200px;
}
.only-two>span>span{
  padding-left: 10px;
}
</style>
